<template>
  <div id="userCenter">
    <com-head></com-head>
    <div class="topbg">
      <div class="header">个人中心</div>
      <div class="content"> 
        <div class="touxiang">
          <img src="../assets/images/people.png" alt="">
        </div>
        <div>
        <p>{{arr.user_name}}</p>
        <p>{{arr.phone}}</p>
        <p>当前剩余积分：{{arr.points}}积分</p>
        </div>
      </div> 
    </div>
    <div class="fatherbox">
      <div class="recode">积分记录</div>
      <div class="titleP" v-for="(item,index) in gaojian" :key="index">
         <p class="titleConent">{{item.log}}</p>
         <p class="time">{{item.add_time}}</p>
         <div class="boxmoney" :class="{active: item.status==='0'}">{{paystatus[item.status]}}</div>
      </div>
    </div>
    <com-foot :select="3"></com-foot>
  </div>
</template>

<script>
export default {
  name: 'userCenter',
  data () {
    return {
      arr:[],
      gaojian: [],
      paystatus: ['充值失败','充值成功']
    };
  },
  created () {
    this.jifen();
  },
  methods: {
    jifen () {
      // 用户信息
      this.axios.post('User/index')
    .then((response) => {
      this.arr=response.data.arr 
    })
    // 记录
    this.axios.post('User/user_points_log')
    .then((response) => {
      console.log(response);
     this.gaojian = response.data 
    }) 
    }
  }
};
</script>

<style lang="scss">
  #userCenter {
    background: white;
    #pageHead {
      // display: none;
     background-color: transparent;
    }
    .topbg {
      width: 100%;
      height: 415px;
      background-image: url('../assets/images/user.png');
      background-size: 100% 100%; 
      .header {
        height: 86px;
        text-align: center;
        color: black;
        line-height: 86px;
        font-size: 24px;
      }
      .content {
        box-sizing: border-box;
        padding-top: 50px; 
          width:620px;
          height:299px;
          background-color: white;
          border-radius:10px;
          margin: 0 auto;
          box-shadow:7px 10px 0px rgba(0,0,0,0.41);
        .touxiang {
          height: 112px;
          text-align: center;
          img {
            height: 100%;
          }
        }
          p {
            text-align: center;
            line-height: 34px;
          }
          p:nth-of-type(1) {
            margin-top: 10px;
            font-size:21px;
            color:rgba(0,0,0,1)
          }
          p:nth-of-type(2) {
            font-size:18px;
            color:rgba(160,160,160,1);
          }
          p:nth-of-type(3) {
            font-size:18px;
            color:rgba(89,89,89,1);
          }
        }
    }
  .fatherbox {
    padding: 0 50px;
    .recode {
      height: 90px;
      line-height: 90px;
      border-bottom: 1Px solid #f4f4f4; 
    }
    .titleP {
        width: 100%;
        border-bottom: 1px solid #e0d8d8;
        box-sizing: border-box;
        color: #9c9a9b;
        position: relative;
        p:nth-of-type(2){
						font-size:14px;
				  }
        p:nth-of-type(2){
						font-size:12px;
					}
        .boxmoney {
          // width: 70px;
          height: 30px;
					font-size:12px;
          text-align: center;
          line-height: 30px;
          color: #ff9100;
          position: absolute;
          right: 15px;
          top: 50%;
          transform: translateY(-50%)
        }
        .active{
        color: #fd0000;
        }
        }
  }
  }
</style>
